import { history } from '@/.umi/core/history';
import { Button, Col, Descriptions, Form, message, Row, Spin,Image  } from 'antd';
import React, { useEffect, useState } from 'react';
import request from '@/http';
import TextArea from 'antd/lib/input/TextArea';
import { Repairs } from '@/pages/login/service';
interface MaintenanceRecord {
    beginTime: any;
    endTime: any;
    place: any;
    goods: any;
    content: any;
    evaluate: any;
    picture: any;
    result: any;
    state: any;
    states: any;
  }

export default function particulars() {
    const [formObject] = Form.useForm(); //获取数据
    const [desData, setDesData] = useState<MaintenanceRecord>({
        beginTime: '',
        endTime: '',
        place: '',
        goods: '',
        content: '',
        evaluate: '',
        picture: '',
        result: '',
        state: '',
        states: '',
      });
    const [spinning, setspinning] = useState(true);

    const GetData=async ()=>{
            await request.get('/api/Repairs/GetRepairs?id='+Repairs.getRepairsId().id).then((response:any)=>{
              if(response.code==200){
                setspinning(false);
                setstates(response.repairs.states)
                setDesData(response.repairs);
                formObject.setFieldsValue({
                    content: response.repairs.content,
                    evaluate: response.repairs.evaluate,
                    picture: response.repairs.picture,
                    result: response.repairs.result
                  });
                  setsrc('http://localhost:5000/api/Image/ShowImage?str='+encodeURI(response.repairs.picture))
              }else{
                setspinning(false);
                message.success(response.message);
              }
            })
    }

    useEffect(() => {
        GetData();
    }, [])

    const [src, setsrc] = useState('error')

    const [states, setstates] = useState('')

    return (
        <Spin spinning={spinning} size="large">
      <Row justify="center" style={{ marginTop: 30 }}>
      <Col span={22}>
          <span style={{ color: 'red', fontSize: '25px', float: 'right' }}>
            {states}
          </span>
        </Col>
        <Col span={22}>
          <Descriptions
            layout="vertical"
            labelStyle={{
              fontSize: '13px',
              fontWeight: 'bold',
            }}
            contentStyle={{
              fontSize: '16px',
            }}
            column={4}
          >
            <Descriptions.Item label="申请时间">
              {desData.beginTime}
            </Descriptions.Item>
            <Descriptions.Item label="维修时间">{desData.endTime}</Descriptions.Item>
            <Descriptions.Item label="地点">
              {desData.place}
            </Descriptions.Item>
            <Descriptions.Item label="维修物品">
              {desData.goods}
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          <Form
            name="editForm"
            form={formObject}
            preserve={false}
            layout="vertical"
          >
            <Row gutter={24} justify="center">
              <Col span={24} key="6">
                <Form.Item
                  name="content"
                  style={{ marginBottom: 24 }}
                  label='问题描述'
                >
                  <TextArea rows={4} style={{ marginTop: 10 }} disabled />
                </Form.Item>
              </Col>
              <Col span={24} key="9">
                <Form.Item
                  name="picture"
                  style={{ marginBottom: 24 }}
                  label='图片'
                >
                  <Image
                      width={200}
                      height={200}
                      src={src}
                      fallback=""
                    />
                  {/* <TextArea rows={1} style={{ marginTop: 10 }} disabled /> */}
                </Form.Item>
              </Col>
              <Col span={24} key="8">
                <Form.Item
                  name="result"
                  style={{ marginBottom: 24 }}
                  label='结果'
                >
                  <TextArea rows={2} style={{ marginTop: 10 }} disabled />
                </Form.Item>
              </Col>
              <Col span={24} key="7">
                <Form.Item
                  name="evaluate"
                  style={{ marginBottom: 24 }}
                  label='评价'
                >
                  <TextArea rows={4} style={{ marginTop: 10 }} disabled />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <Button
            onClick={() => {
              history.goBack();
            }}
            style={{ margin: 10 }}
          >
            返回
          </Button>
          </Col>
        
      </Row>
    </Spin>
    )
}
